<template>
  <div class="item">
    <div>
      <canvas ref="cvs" style="height: 260px;width: 260px;"></canvas>
    </div>
    <div class="level" :style="{color:utils.paramIsOverproof('aqi',value).color}">
      <i class="iconfont iconshuye"></i>
      <span>{{ utils.paramIsOverproof('aqi', value).text }}</span>
    </div>
  </div>
</template>

<script>
import {onMounted, ref, reactive, watch, hydrate} from 'vue';
import * as utils from "@/assets/common/js/utils";

export default {
  name: 'pollutionCircle',
  props: {
    value: {
      default: 0,
      type: Number,
    },
    centerText: {
      default: 'centerText',
      type: String,
    },
  },

  setup: function (props) {
    let cvs = ref('cvs');
    const drawCircle = () => {
      let canvas = cvs.value
      let ctx = canvas.getContext('2d');
      canvas.width = 260;
      canvas.height = 260;
      /*高清处理*/
      let dpr = window.devicePixelRatio ? window.devicePixelRatio : 1;
      canvas.width = canvas.width * dpr;
      canvas.height = canvas.height * dpr;
      let centerX = canvas.width / 2 / dpr;
      let centerY = canvas.height / 2 / dpr;
      /*高清处理*/
      let radius = 80;
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      let deg = Math.PI / 180;
      ctx.scale(dpr, dpr);//绘制也放大两倍
      let persent = props.value / 350;
      persent = persent >= 1 ? 1 : persent;
      //绘制底色圆弧
      ctx.lineWidth = 10;
      ctx.stroke();
      ctx.lineCap = 'round';
      ctx.beginPath();
      ctx.arc(centerX, centerY, radius, deg * 135, deg * 45, false);
      ctx.strokeStyle = '#A1CEEB';
      ctx.stroke();
      ctx.lineWidth = 10;
      ctx.lineCap = 'round';
      //绘制污染程度圆弧
      ctx.beginPath();
      ctx.arc(centerX, centerY, radius, deg * 135, deg * (135 + 270 * persent), false);
      ctx.strokeStyle = utils.paramIsOverproof('aqi', props.value).color
      ctx.stroke();
      //绘制文字
      ctx.font = "530 60px 微软雅黑";
      ctx.fillStyle = 'rgba(255,255,255,0.9)';
      ctx.textAlign = 'center';
      ctx.fillText(props.value, centerX, centerY);
      ctx.font = "14px 微软雅黑";
      ctx.fillText(props.centerText, centerX, centerY + 25);
    }
    onMounted(() => {
      drawCircle();
    })

    watch(() => props.value, () => {
      drawCircle();
    })

    return {
      utils,
      cvs,
    }
  },

}
</script>

<style scoped>
.item {
  height: 260px;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  background: red;
}

.level {
  position: absolute;
  width: 100%;
  bottom: 70px;
  display: flex;
  justify-content: center;
}
</style>